import Vue from "vue";
import Vuex from "vuex";
//  引入插件

Vue.use(Vuex);

// 实例化vuex仓库
const store = new Vuex.Store({
  // 定义数据 state的值必须是一个对象
  state: {
    title: "无双",
    count: 15,
    actor: "周润发",
  },

  // getters  vuex中的计算属性, 可以根据当前store的数据或者计算属性 再次计算一个值
  getters: {
    // vuex中计算属性的参数就是当前store的state数据
    doubleCount(state) {
      return state.count * 2;
    },
  },

  // mutations 修改state数据的唯一方法
  mutations: {
    // 每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。
    // 这个回调函数就是我们实际进行状态更改的地方，并且接受 state 作为第一个参数

    increment(state) {
      state.count++;
    },

    //每次加n
    incrementN(state, { n }) {
      state.count += n;
    },
  },

  // 异步操作
  actions:{
    incrementWait({ commit }) {
      /* actions中方法的参数是一个阉割版的store,我们可以直接解构出commit使用*/
      setTimeout(() => {
        commit("increment");
      }, 1000);
    },

    incrementNWait({ commit }, payload) {
      setTimeout(() => {
        commit("incrementN", payload);
      }, 1000);
    },

  }
});
// 暴露仓库

export default store;
